import React, { Component } from 'react';
// 引入组件
import { CSSTransition } from 'react-transition-group'
// 引入样式
import './css1.css'

class Csstransition extends Component {
  constructor() {
    super()
    this.state = {
      inProp: true
    }
  }
  toggle() {
    this.setState({
      inProp: !this.state.inProp
    })
  }
  render() {
    return (
      <div>
        <button onClick={() => this.toggle()}>toggle</button>
        {/* in:控制显示隐藏，类似v-if */}
        <CSSTransition unmountOnExit in={this.state.inProp} timeout={200} classNames="my-node">
          <div>
            {"I'll receive my-node-* classes"}
          </div>
        </CSSTransition>
      </div>
    );
  }
}

export default Csstransition;
